<template>
  <div class="data-management-container">
    <!-- 数据概览卡片 -->
    <div class="data-overview-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="card-content">
              <div class="card-icon" style="background-color: #409EFF;">
                <i class="el-icon-user"></i>
              </div>
              <div class="card-info">
                <span class="card-title">注册用户</span>
                <span class="card-value">12,345</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="card-content">
              <div class="card-icon" style="background-color: #67C23A;">
                <i class="el-icon-location-information"></i>
              </div>
              <div class="card-info">
                <span class="card-title">景点数量</span>
                <span class="card-value">86</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="card-content">
              <div class="card-icon" style="background-color: #E6A23C;">
                <i class="el-icon-news"></i>
              </div>
              <div class="card-info">
                <span class="card-title">今日新闻</span>
                <span class="card-value">15</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="card-content">
              <div class="card-icon" style="background-color: #F56C6C;">
                <i class="el-icon-user-solid"></i>
              </div>
              <div class="card-info">
                <span class="card-title">今日游客</span>
                <span class="card-value">8,672</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <el-tabs v-model="activeTab" type="card">
        <!-- 人员管理 -->
        <el-tab-pane label="人员管理" name="personnel">
          <el-table :data="staffData" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="position" label="职位"></el-table-column>
            <el-table-column prop="department" label="部门"></el-table-column>
            <el-table-column prop="phone" label="联系电话" width="150"></el-table-column>
            <el-table-column label="操作" width="180">
              <template #default>
                <el-button size="mini" type="primary">编辑</el-button>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
            </el-pagination>
          </div>
        </el-tab-pane>

        <!-- 区域管理 -->
        <el-tab-pane label="区域管理" name="area">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card shadow="never">
                <div slot="header" class="clearfix">
                  <span>区域列表</span>
                  <el-button style="float: right; padding: 3px 0" type="text">添加区域</el-button>
                </div>
                <el-tree
                  :data="areaData"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                  default-expand-all>
                </el-tree>
              </el-card>
            </el-col>
            <el-col :span="16">
              <el-card shadow="never">
                <div slot="header" class="clearfix">
                  <span>区域详情</span>
                </div>
                <el-form label-width="100px">
                  <el-form-item label="区域名称">
                    <el-input v-model="currentArea.name"></el-input>
                  </el-form-item>
                  <el-form-item label="区域编码">
                    <el-input v-model="currentArea.code"></el-input>
                  </el-form-item>
                  <el-form-item label="区域描述">
                    <el-input type="textarea" v-model="currentArea.description"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary">保存</el-button>
                    <el-button>取消</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>

        <!-- 新闻列表 -->
        <el-tab-pane label="新闻列表" name="news">
          <div class="news-operation">
            <el-button type="primary" icon="el-icon-plus">添加新闻</el-button>
            <el-input
              placeholder="请输入关键词搜索"
              v-model="newsSearch"
              class="search-input"
              clearable>
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
          <el-table :data="newsData" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column prop="category" label="分类" width="120"></el-table-column>
            <el-table-column prop="publishTime" label="发布时间" width="180"></el-table-column>
            <el-table-column prop="author" label="作者" width="120"></el-table-column>
            <el-table-column label="状态" width="100">
              <template #default="{row}">
                <el-tag :type="row.status === 'published' ? 'success' : 'warning'">
                  {{ row.status === 'published' ? '已发布' : '草稿' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template #default>
                <el-button size="mini">编辑</el-button>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="200">
            </el-pagination>
          </div>
        </el-tab-pane>

        <!-- 天气情况 -->
        <el-tab-pane label="天气情况" name="weather">
          <div class="weather-container">
            <h3 class="weather-title">西安未来7天天气预报</h3>
            <el-row :gutter="20">
              <el-col :span="3" v-for="(day, index) in weatherData" :key="index">
                <el-card shadow="hover" class="weather-card">
                  <div class="weather-date">{{ day.date }}</div>
                  <div class="weather-icon">
                    <i :class="getWeatherIcon(day.weather)"></i>
                  </div>
                  <div class="weather-temp">
                    {{ day.tempLow }}°C ~ {{ day.tempHigh }}°C
                  </div>
                  <div class="weather-desc">{{ day.weather }}</div>
                  <div class="weather-wind">{{ day.wind }}</div>
                </el-card>
              </el-col>
            </el-row>
            <div class="weather-chart-container">
              <div id="weather-chart" style="height: 300px;"></div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 景点人流量 -->
        <el-tab-pane label="景点人流量" name="visitor">
          <div class="visitor-filter">
            <el-date-picker
              v-model="visitorDateRange"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
            <el-select v-model="selectedScenic" placeholder="请选择景点" clearable>
              <el-option
                v-for="item in scenicOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button type="primary">查询</el-button>
          </div>
          <!-- <div class="visitor-chart-container">
            <div id="visitor-chart" style="height: 400px;"></div>
          </div> -->
          <el-table :data="visitorData" border style="width: 100%">
            <el-table-column prop="scenicName" label="景点名称"></el-table-column>
            <el-table-column prop="date" label="日期" width="120"></el-table-column>
            <el-table-column prop="visitorCount" label="游客数量" width="120"></el-table-column>
            <el-table-column prop="maxCapacity" label="最大承载量" width="120"></el-table-column>
            <el-table-column prop="percentage" label="承载率" width="120">
              <template #default="{row}">
                <el-progress :percentage="row.percentage" :color="getPercentageColor(row.percentage)"></el-progress>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeTab: 'personnel',
      currentPage: 1,
      pageSize: 10,
      newsSearch: '',
      currentArea: {
        name: '',
        code: '',
        description: ''
      },
      visitorDateRange: '',
      selectedScenic: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      scenicOptions: [
        { value: '1', label: '兵马俑' },
        { value: '2', label: '大雁塔' },
        { value: '3', label: '钟鼓楼' },
        { value: '4', label: '回民街' },
        { value: '5', label: '华清宫' }
      ],
      staffData: [
        { id: 1, name: '张三', position: '系统管理员', department: '信息技术部', phone: '13800138001' },
        { id: 2, name: '李四', position: '数据分析师', department: '数据分析部', phone: '13800138002' },
        { id: 3, name: '王五', position: '客服主管', department: '客户服务部', phone: '13800138003' },
        { id: 4, name: '赵六', position: '市场专员', department: '市场营销部', phone: '13800138004' },
        { id: 5, name: '钱七', position: '景区管理员', department: '景区管理部', phone: '13800138005' }
      ],
      areaData: [{
        id: 1,
        label: '西安市',
        children: [{
          id: 2,
          label: '雁塔区',
          children: [
            { id: 3, label: '大雁塔景区' },
            { id: 4, label: '陕西历史博物馆' }
          ]
        }, {
          id: 5,
          label: '临潼区',
          children: [
            { id: 6, label: '兵马俑博物馆' },
            { id: 7, label: '华清宫景区' }
          ]
        }, {
          id: 8,
          label: '碑林区',
          children: [
            { id: 9, label: '钟鼓楼广场' },
            { id: 10, label: '回民街' }
          ]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      newsData: [
        { id: 1, title: '西安文旅推出智慧旅游新平台', category: '平台公告', publishTime: '2023-05-10 09:30', author: '管理员', status: 'published' },
        { id: 2, title: '五一假期西安旅游人数创新高', category: '行业新闻', publishTime: '2023-05-05 14:15', author: '编辑部', status: 'published' },
        { id: 3, title: '大雁塔音乐喷泉表演时间调整', category: '景区公告', publishTime: '2023-04-28 16:45', author: '景区管理', status: 'published' },
        { id: 4, title: '西安新增3家4A级旅游景区', category: '行业新闻', publishTime: '2023-04-20 11:20', author: '编辑部', status: 'draft' },
        { id: 5, title: '关于景区门票预约系统升级的通知', category: '平台公告', publishTime: '2023-04-15 10:00', author: '管理员', status: 'published' }
      ],
      weatherData: [
        { date: '今天', weather: '晴', tempLow: 18, tempHigh: 32, wind: '东南风3级' },
        { date: '明天', weather: '多云', tempLow: 20, tempHigh: 30, wind: '东南风2级' },
        { date: '后天', weather: '阴', tempLow: 19, tempHigh: 28, wind: '东风1级' },
        { date: '周三', weather: '小雨', tempLow: 17, tempHigh: 25, wind: '东北风2级' },
        { date: '周四', weather: '多云', tempLow: 16, tempHigh: 27, wind: '西北风3级' },
        { date: '周五', weather: '晴', tempLow: 15, tempHigh: 29, wind: '西风2级' },
        { date: '周六', weather: '晴', tempLow: 17, tempHigh: 31, wind: '西南风1级' }
      ],
      visitorData: [
        { scenicName: '兵马俑', date: '2023-05-10', visitorCount: 12543, maxCapacity: 20000, percentage: 63 },
        { scenicName: '大雁塔', date: '2023-05-10', visitorCount: 8765, maxCapacity: 15000, percentage: 58 },
        { scenicName: '钟鼓楼', date: '2023-05-10', visitorCount: 6543, maxCapacity: 10000, percentage: 65 },
        { scenicName: '回民街', date: '2023-05-10', visitorCount: 9876, maxCapacity: 12000, percentage: 82 },
        { scenicName: '华清宫', date: '2023-05-10', visitorCount: 5432, maxCapacity: 8000, percentage: 68 }
      ]
    }
  },
  methods: {
    handleSizeChange (val) {
      this.pageSize = val
    },
    handleCurrentChange (val) {
      this.currentPage = val
    },
    handleNodeClick (data) {
      this.currentArea = {
        name: data.label,
        code: `XA-${data.id}`,
        description: `${data.label}是西安重要的文化旅游区域`
      }
    },
    getWeatherIcon (weather) {
      const iconMap = {
        晴: 'el-icon-sunny',
        多云: 'el-icon-cloudy',
        阴: 'el-icon-overcast',
        小雨: 'el-icon-light-rain',
        中雨: 'el-icon-moderate-rain',
        大雨: 'el-icon-heavy-rain'
      }
      return iconMap[weather] || 'el-icon-question'
    },
    getPercentageColor (percentage) {
      if (percentage >= 80) {
        return '#f56c6c'
      } else if (percentage >= 60) {
        return '#e6a23c'
      } else {
        return '#67c23a'
      }
    },
    initWeatherChart () {
      // 这里应该是使用ECharts初始化图表
      // 示例代码，实际使用时需要引入ECharts
      /*
      const chart = echarts.init(document.getElementById('weather-chart'))
      chart.setOption({
        // 图表配置
      })
      */
    },
    initVisitorChart () {
      // 这里应该是使用ECharts初始化图表
      // 示例代码，实际使用时需要引入ECharts
      /*
      const chart = echarts.init(document.getElementById('visitor-chart'))
      chart.setOption({
        // 图表配置
      })
      */
    }
  },
  mounted () {
    // 初始化图表
    this.initWeatherChart()
    this.initVisitorChart()
  }
}
</script>

<style scoped>
.data-management-container {
  padding: 20px;
  width: 100%;
  height: calc(100vh - 100px);
  background-color: rgba(100, 84, 6, 0.2);
}

.data-overview-cards {
  margin-bottom: 20px;
}

.card-content {
  display: flex;
  align-items: center;
}

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.card-icon i {
  font-size: 24px;
  color: white;
}

.card-info {
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.card-value {
  font-size: 22px;
  font-weight: bold;
}

.main-content {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.news-operation {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
}

.weather-container {
  padding: 10px;
}

.weather-title {
  text-align: center;
  margin-bottom: 20px;
}

.weather-card {
  text-align: center;
  margin-bottom: 20px;
}

.weather-date {
  font-weight: bold;
  margin-bottom: 10px;
}

.weather-icon i {
  font-size: 36px;
  color: #F56C6C;
  margin: 10px 0;
}

.weather-temp {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0;
}

.weather-desc {
  color: #606266;
  margin-bottom: 5px;
}

.weather-wind {
  font-size: 12px;
  color: #909399;
}

.weather-chart-container {
  margin-top: 30px;
}

.visitor-filter {
  margin-bottom: 20px;
}

.visitor-filter .el-select {
  margin-left: 10px;
  width: 200px;
}

.visitor-filter .el-button {
  margin-left: 10px;
}

.visitor-chart-container {
  margin-bottom: 30px;
}
</style>
